<template>
  <!-- 审计署统计表-02表 -->
  <j-modal
    :title="'报表上报'"
    :width="800"
    :visible="visible"
    :maskClosable="false"
    :ok-button-props="{ props: { disabled: disableSubmit } }"
    :fullscreen="true"
    @close="close"
    cancelText="关闭"
  >
    <template slot="footer">
      <a-button key="back" style="padding-left: 20px; padding-right: 20px" @click="close()"> 关闭 </a-button>
      <a-popconfirm :disabled="disableSubmit" title="确定保存吗?" @confirm="() => saveOrSubmit('save', null)">
        <a-button key="save" style="padding-left: 8px; padding-right: 8px; margin-left: 8px" :disabled="disableSubmit">
          保存
        </a-button>
      </a-popconfirm>
      <a-button
        key="submit"
        type="primary"
        style="padding-left: 8px; padding-right: 8px; margin-left: 8px"
        :disabled="disableSubmit"
        @click="close(true)"
      >
        提交审批
      </a-button>
    </template>
    <a-spin :spinning="Loading">
      <div :class="{ isCheck: isCheck }">
        <div class="table-header table-header-filx">
          <div class="table-side-title">
            {{ title }}
          </div>
          <a-form-model
            class="table-title table-left"
            :style="{ height: !disableSubmit ? '60px' : '40px' }"
            ref="form1"
            :rules="validatorRules"
            layout="inline"
            :model="fromModel"
          >
            <a-form-model-item label="统一社会信用代码：" prop="tyshxydm">
              <a-input
                v-if="!disableSubmit"
                v-model="fromModel.tyshxydm"
                :disabled="disableSubmit"
                placeholder="请输入统一社会信用代码"
              ></a-input>
              <span v-else>{{ fromModel.tyshxydm }}</span>
            </a-form-model-item>
            <a-form-model-item label="单位详细名称：" prop="officeName">
              <a-input
                v-if="!disableSubmit"
                v-model="fromModel.officeName"
                :disabled="disableSubmit"
                placeholder="请输入单位详细名称"
              ></a-input>
              <span v-else>{{ fromModel.officeName }}</span>
            </a-form-model-item>
            <a-form-model-item label="填表时间：" prop="">{{ model.createTime }}</a-form-model-item>
          </a-form-model>
          <a-form-model
            class="table-title"
            style="width: 465px"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            ref="form2"
            :rules="validatorRules1"
            :model="tableHeard"
          >
            <a-form-model-item :label="`表    号:`" prop="bh">
              <a-input
                v-if="!disableSubmit"
                v-model="tableHeard.bh"
                :disabled="disableSubmit"
                placeholder="请输入表号"
              ></a-input>
              <span v-else>{{ tableHeard.bh }}</span>
            </a-form-model-item>
            <a-form-model-item label="制定机关：" prop="zdjg">
              <a-input
                v-if="!disableSubmit"
                v-model="tableHeard.zdjg"
                :disabled="disableSubmit"
                placeholder="请输入制定机关"
              ></a-input>
              <span v-else>{{ tableHeard.zdjg }}</span>
            </a-form-model-item>
            <a-form-model-item label="批准机关：" prop="pzjg">
              <a-input
                v-if="!disableSubmit"
                v-model="tableHeard.pzjg"
                :disabled="disableSubmit"
                placeholder="请输入批准机关"
              ></a-input>
              <span v-else>{{ tableHeard.pzjg }}</span>
            </a-form-model-item>
            <a-form-model-item label="批准文号：" prop="pzwh">
              <a-input
                v-if="!disableSubmit"
                v-model="tableHeard.pzwh"
                :disabled="disableSubmit"
                placeholder="请输入批准文号"
              ></a-input>
              <span v-else>{{ tableHeard.pzwh }}</span>
            </a-form-model-item>
            <a-form-model-item label="有效期至：" prop="yxq">
              <a-month-picker
                v-if="!disableSubmit"
                placeholder="请输入有效期至"
                value-format="YYYY-MM"
                :disabled="disableSubmit"
                style="width: 100%"
                format="YYYY-MM"
                v-model="tableHeard.yxq"
              />
              <span v-else>{{ tableHeard.yxq }}</span>
            </a-form-model-item>
          </a-form-model>
        </div>
        <a-table
          class="edit-list"
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="false"
        >
          <template v-slot:number="text, record">
            <a-input-number
              v-if="!disableSubmit"
              class="inputnumber"
              :formatter="(value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
              :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
              :disabled="disableSubmit"
              :min="0"
              v-model="record.num"
            />
            <span v-else>{{ record.num }}</span>
          </template>
        </a-table>
        <div class="table-header">
          <a-form-model class="table-title" ref="form3" :rules="validatorRules" layout="inline" :model="fromModel">
            <a-form-model-item label="统计负责人:" prop="tjfzr">
              <a-input
                v-if="!disableSubmit"
                v-model="fromModel.tjfzr"
                :disabled="disableSubmit"
                placeholder="请输入填表人姓名"
              ></a-input>
              <span v-else>{{ fromModel.tjfzr }}</span>
            </a-form-model-item>
            <a-form-model-item label="联系电话:" prop="tel">
              <a-input
                v-if="!disableSubmit"
                v-model="fromModel.tel"
                :disabled="disableSubmit"
                placeholder="请输入联系电话"
              ></a-input>
              <span v-else>{{ fromModel.tel }}</span>
            </a-form-model-item>
            <a-form-model-item label="填表人:" prop="">
              {{ model.createByText }}
            </a-form-model-item>
            <a-form-model-item label="填表时间：" prop="">
              {{ model.createTime }}
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>
    </a-spin>
    <SelectApprove ref="approver" @submitData="saveOrSubmit"></SelectApprove>
    <AssistDrawer />
  </j-modal>
</template>

<script>
import { httpAction, getAction, postAction, deleteAction } from '@/api/manage'
import SelectApprove from '../SelectApprover'
import { BbsbModelMixin1 } from './BbsbModelMixin1'
import AssistDrawer from '../../component/AssistDrawerM8.vue'
import columns from './columns8'
export default {
  mixins: [BbsbModelMixin1],
  components: {
    SelectApprove,
    AssistDrawer,
  },
  data() {
    return {
      columns: columns(),
      sjType: '6',
      state: '1',
      tableHeard: {
        bh: '',
        zdjg: '',
        pzjg: '',
        pzwh: '',
        yxq: '',
      },
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      fromModel: {
        tyshxydm: '',
        officeName: '',
        tjfzr: '',
        tel: '',
      },
      model: {},
      title: '单位内部审计业务情况表',
      url: {
        list: '/sjxxzhbb/sjsbb/queryReportDwywqkById',
        add: '/sjxxzhbb/sjsbb/addReportDwywqk',
        edit: '/sjxxzhbb/sjsbb/updReportDwywqk',
        delete: '/sjxxzhbb/sjAuditInfo/remove',
        submitData: '/common/sjProcCommon/auditDwywqkShen',
        getCreatData: '/sjxxzhbb/sjsbb/querySJSTwoInitData',
      },
      validatorRules: {
        tyshxydm: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }],
        officeName: [{ required: true, message: '请输入单位详细名称', trigger: 'blur' }],
        tjfzr: [{ required: true, message: '请输入统计负责人姓名', trigger: 'blur' }],
        tel: [{ required: true, message: '请输入正确的联系电话', trigger: 'blur',}],
      },
      validatorRules1: {
        bh: [{ required: true, message: '请输入表号', trigger: 'blur' }],
        zdjg: [{ required: true, message: '请输入制定机关', trigger: 'blur' }],
        pzjg: [{ required: true, message: '请输入批准机关', trigger: 'blur' }],
        pzwh: [{ required: true, message: '请输入批准文号', trigger: 'blur' }],
        yxq: [{ required: true, message: '请输入有效期至', trigger: 'change' }],
      },
    }
  },
  methods: {
    picValidator(rule, value, callback) {
      let TEL_REGEXP = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/
      if (!value) {
        callback(new Error('请输入手机号'))
      } else {
        if (!TEL_REGEXP.test(value)) {
          callback(new Error('手机号格式不正确'))
        } else {
          callback()
        }
      }
    },
    saveOrSubmit(style, approveId) {
      this.btnStyle = style
      this.approveId = approveId
      let valid1, valid2, valid3
      this.$refs.form1.validate((valid) => {
        valid1 = valid
      })
      this.$refs.form2.validate((valid) => {
        valid2 = valid
      })
      this.$refs.form3.validate((valid) => {
        valid3 = valid
      })
      if (valid1 && valid2 && valid3) {
        this.saveData()
      } else {
        this.$message.warning('有必填项未填写')
      }
    },
    // 数据初始化
    creatReport() {
      this.fromModel = this.$options.data().fromModel
      this.tableHeard = this.$options.data().tableHeard
      getAction(this.url.getCreatData, {
        year: this.model.year,
        quarter: this.model.quarter,
      }).then((res) => {
        let { bh, zdjg, pzjg, pzwh, yxq, tyshxydm, officeName, tjfzr, tel } = res.result
        if (res.success) {
          this.dataSource = res.result.list
          this.tableHeard = { bh, zdjg, pzjg, pzwh, yxq }
          this.fromModel = { tyshxydm, officeName, tjfzr, tel }
        }
        this.Loading = false
      })
    },
    saveData() {
      let url, params, method
      // 如果没有auditId字段，表明是新增，如果有表明是修改
      if (this.model.id) {
        url = this.url.edit
        method = 'post'
        params = {
          auditId: this.model.id,
          info: JSON.stringify(this.dataSource),
          sjType: '8',
          ...this.fromModel,
          ...this.tableHeard,
        }
      } else {
        method = 'post'
        params = {
          ...this.fromModel,
          ...this.tableHeard,
          year: this.model.year,
          quarter: this.model.quarter,
          officeId: this.model.officeId,
          info: JSON.stringify(this.dataSource),
          sjType: '8',
        }
        url = this.url.add
      }
      httpAction(url, params, method).then((res) => {
        if (res.success) {
          if (this.btnStyle == 'save') {
            this.$message.success(res.message)
            this.visible = false
            this.$emit('ok')
            return
          } else {
            this.submitData(this.approveId, res.result)
          }
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 获取报表表格信息
    getTableData() {
      getAction(this.url.list, { auditId: this.model.id }).then((res) => {
        if (res.success) {
          this.model.year = res.result.year
          this.model.quarter = res.result.quarter
          this.model.createByText = this.model.realName

          this.fromModel.tjfzr = res.result.tjfzr
          this.fromModel.tyshxydm = res.result.tyshxydm
          this.fromModel.officeName = res.result.officeName
          this.fromModel.tel = res.result.tel

          this.tableHeard.bh = res.result.bh
          this.tableHeard.zdjg = res.result.zdjg
          this.tableHeard.pzjg = res.result.pzjg
          this.tableHeard.pzwh = res.result.pzwh
          this.tableHeard.yxq = res.result.yxq
          this.dataSource = JSON.parse(res.result.info)
        }
        this.Loading = false
      })
    },
    submitData(userId, proId) {
      postAction(this.url.submitData, {
        auditId: this.model.id ? this.model.id : proId,
        userIds: userId,
        type: this.type,
        state: this.state,
        sjType: this.sjType,
        year: this.model.year,
        quarter: this.model.quarter,
        reportInfo: JSON.stringify(this.dataSource),
      }).then((res) => {
        this.Loading = false
        if (res.success) {
          this.$message.success(res.message)
          this.visible = false
          this.$refs.approver.confirmLoading = false
          this.$emit('ok')
        } else {
          console.log(res)
        }
      })
    },
    delete(record) {
      deleteAction(this.url.delete, { id: record.id }).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.$emit('ok')
        } else {
          this.$message.error(res.message)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '../../../css/checkAndEdit.less';
.input-title {
  height: 30px !important;
}
.table-header {
  margin-bottom: 10px;

  .table-title {
    font-weight: bold;
    margin-left: 15px;
  }
}
.table-header-filx {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  .table-side-title {
    position: absolute;
    font-size: 34px;
    color: #666;
    font-weight: 600;
    top: calc((100% - 60px) / 2);
    left: calc((100% - 465px) / 2);
    transform: translate(-50%, -50%);
  }
  .table-left {
    width: 1200px;
    /deep/.ant-form-item-with-help {
      margin-bottom: 0;
    }
  }
}
.edit-list {
  .inputnumber {
    border: 0;
    width: 100%;

    /deep/.ant-input-number-input {
      padding: 0;
      text-align: center;
    }
  }
}
</style>